<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>管理员后台</title>
    <link rel="stylesheet" href="../static/font_4894039_ann01zlojhq/iconfont.css" th:href="@{/font_4894039_ann01zlojhq/iconfont.css}">
    <link rel="stylesheet" href="../static/css/admin/admin.css" th:href="@{/css/admin/admin.css}">
    <link rel="icon" href="../static/img/default_avatar/2e6ced4da4ff5a32c7f1866bff276450.png" th:href="@{/img/default_avatar/2e6ced4da4ff5a32c7f1866bff276450.png}" type="image/png">
</head>
<body>
<span class="alert" style="color: red;position: fixed"></span>
<!--顶部栏-->
<div class="top_bar">
    <h3 class="">未来头条管理系统</h3>
    <div class="admin_profile">
        <img src="../static/img/default_avatar/image.png" alt="管理员头像" class="profiles" th:src="@{/img/default_avatar/image.png}">        <!--头像地址待定-->
        <div class="admin_profile_dropdown">
            <a href="#" id="admin-set">设置</a>
            <a href="/user/logout">退出登录</a>
        </div>
    </div>
</div>
<!--左侧导航栏-->
<nav class="left_bar" style="position: fixed">
    <div class="left_admin_information">
        <img src="../static/img/default_avatar/image.png" alt="管理员头像"  class="profiles" th:src="@{/img/default_avatar/image.png}">
        <p style="margin: 16px;" id="admin-name-left">管理员：admin</p>        <!--管理员名称-->
    </div>
    <ul class="left_bar_ul">
        <li data-target="user_manageUser_manage">用户管理</li>
        <li data-target="article_review">新闻资讯审核</li>
        <li data-target="hot_search">热搜管理</li>
        <li data-target="tag_manage">标签管理</li>
        <li data-target="review_form">审核记录表</li>
    </ul>
</nav>
<!--主体部分-->
<div id="nowActiveModule" th:text="${activeModule}" style="display: none"></div>
<main id="user_manageUser_manage" style="display: none;">
    <div class="main2" th:if="${activeModule=='user_manageUser_manage'}">
        <h2>用户管理</h2>
        <div class="search-container">
            <!--<input type="text" placeholder="用户昵称" id="search-user-input">
            <button id="search-user">搜索</button>
            <select>
                <option value="all">全部用户</option>
                <option value="verified">管理员</option>
            </select>-->
            <form th:action="@{/AdminController/users}" method="get">
                <input type="text" name="keyword" th:value="${keyword}" placeholder="用户关键字查询" id="search-user-input">
                <button type="submit" id="search-user">搜索</button>
            </form>
        </div>
        <button id="batch-delete-user" class="batch-operate">批量删除</button>
        <button id="batch-ban-user" class="batch-operate">批量设置权限</button>
        <button id="add-user"><i class="iconfont icon-tianjia"></i>添加用户</button>
        <table>
            <thead>
            <tr>
                <th><input type="checkbox" id="selectAll"></th>
                <th>用户ID</th>
                <th>用户名</th>
                <th>性别</th>
                <th>头像</th>
                <th>粉丝数</th>
                <th>邮箱</th>
                <th>注册时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="user: ${users}" >
                <td><input type="checkbox" class="userCheckbox"></td>
                <td th:text="${user.userId}"></td>
                <td th:text="${user.userName}"></td>
                <td th:text="${user.gender == 0 ? '男' : user.gender == 1 ? '女' : '未设置'}"></td>
                <td><img th:src="${user.avatar}" alt="头像"></td>
                <td th:text="${user.followerCount}"></td>
                <td th:text="${user.email}" style="max-width: 160px"></td>
                <td th:text="${user.createTime}"></td>
                <td>
                    <div class="user-ban-status" th:text="${user.banAccount==1?'封禁':(user.isBanned==1?'禁言':(user.isPrivateMessage==1?'禁私':'正常'))}"
                         th:style="${user.banAccount == 1}? 'background-color:rgba(255,10,10,1)' : (${user.isBanned == 1 or user.isPrivateMessage == 1}? 'background-color:rgba(242,164, 81,1)' : 'background-color:rgba( 56,179,148,1)')">
                    </div>
                </td>
                <td>
                    <button class="edit-user operate"><i class="iconfont icon-bianji"></i>编辑</button>
                    <button class="ban-post operate"><i class="iconfont icon-jinyan"></i>权限设置</button>
                    <button class="delete-user operate"><i class="iconfont icon-shanchu"></i>删除</button>
                </td>
            </tr>
            <tr th:if="${#lists.isEmpty(users)}">
                <td colspan="10" style="text-align:center;color:red;">没有查询到用户数据</td>
            </tr>
            </tbody>
        </table>
        <div class="page-component user-management-pagination" style="display: flex;">
            <ul class="paging">
                <li th:class="${pageInfo.currentPage == 1} ? 'disabled' : ''">
                    <a th:if="${pageInfo.currentPage > 1}"
                       th:href="@{/AdminController/users(currentPage=${pageInfo.currentPage - 1}, pageSize=${pageInfo.pageSize},keyword=${keyword})}">
                        <i class="iconfont icon-xiangzuo-1"></i>
                    </a>
                    <!-- 当前页码为 1 时，不显示链接 -->
                    <span th:if="${pageInfo.currentPage == 1}" class="disabled">
                    <i class="iconfont icon-xiangzuo-1"></i>
                </span>
                </li>
                <!-- 动态页码生成 -->
                <li th:each="i : ${#numbers.sequence((pageInfo.currentPage - 2 > 1)? pageInfo.currentPage - 2 : 1, (pageInfo.currentPage + 2 < totalPages)? pageInfo.currentPage + 2 : totalPages)}"
                    th:class="${i == pageInfo.currentPage} ? 'active' : ''">
                    <a th:href="@{/AdminController/users(currentPage=${i}, pageSize=${pageInfo.pageSize},keyword=${keyword})}"
                       th:text="${i}"></a>
                </li>
                <!-- 下一页按钮 -->
                <li th:class="${pageInfo.currentPage == 1} ? 'disabled move_jiantou' : 'move_jiantou'"
                    style="width: 40px; height: 40px;">
                    <a th:if="${pageInfo.currentPage < totalPages}"
                       th:href="@{/AdminController/users(currentPage=${pageInfo.currentPage + 1}, pageSize=${pageInfo.pageSize}, keyword=${keyword})}">
                        <i class="iconfont icon-xiangyou-1"></i>
                    </a>
                    <!-- 当前页码为 最后 时，不显示链接 -->
                    <span th:if="${pageInfo.currentPage == totalPages}" class="disabled">
                    <i class="iconfont icon-xiangyou-1"></i>
                </span>
                </li>
            </ul>
            <p class="page-number">
                当前为第<span th:text="${pageInfo.currentPage}"></span>页，
                共<span th:text="${totalPages}"></span>页
            </p>
            <div class="jump-component">
                <input type="text" class="jump-input" id="jumpPage-user" autocomplete="new-password" readonly onfocus="this.removeAttribute('readonly')">
                <button class="jump-btn" onclick="jumpToPage('jumpPage-user','users')" id="user-jumpbtn">跳转</button>
            </div>
        </div>
    </div>
    <div th:if="${activeModule!='user_manageUser_manage'}" class="Loading">加载中...<i class="iconfont icon-jiazaizhong "></i></div>
</main>


<main id="article_review" style="display: none;">
    <div class="main2" th:if="${activeModule=='article_review'}">
        <h2>新闻资讯审核</h2>
        <form th:action="@{/AdminController/audit}" method="get" >
            <input type="text" placeholder="搜索新闻" id="search-news" th:value="${keyword}" name="keyword">
            <button type="submit" id="search-article">搜索</button>
        </form>
<!--        <select id="id-audit-search">-->
<!--            <option value="all">全部</option>-->
<!--            <option value="pending">待审核</option>-->
<!--            <option value="approved">已通过</option>-->
<!--            <option value="rejected">已驳回</option>-->
<!--        </select>-->
        <button id="batch-deleteNews">批量删除</button>
        <table>
            <thead>
            <tr>
                <th><input type="checkbox" id="selectAllNews"></th>
                <th>新闻ID</th>
                <th>新闻标题</th>
                <th>新闻作者</th>
                <th>新闻封面</th>
                <th>新闻标签</th>
                <th>发布时间</th>
                <th>审核状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="auditPost : ${auditPostList}">
                <td><input type="checkbox" class="newsCheckbox"></td>
                <td th:text="${auditPost.postId}"></td>
                <td style="max-width: 200px;overflow: hidden;max-height: 60px; white-space: nowrap;" class="audit-td"><a th:text="${auditPost.postTitle}" th:href="@{'/AdminController/hotSearch/showInfo/0'+${auditPost.postId}}"></a></td>
                <td th:text="${auditPost.postAuthor}"></td>
                <td><img alt="封面" th:src="${auditPost.postCover}"></td>
                <td th:text="${auditPost.postTag}"></td>
                <td th:text="${auditPost.createdTime}" style="max-width: 80px"></td>
                <td th:text="${auditPost.auditStatus==0?'待审核':'通过'}"></td>
                <td>
                    <button class="audit" th:onclick="|window.location.href='@{/AdminController/hotSearch/showInfo/0__${auditPost.postId}__}'|"><i class="iconfont icon-shenhe"></i>审核</button>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="page-component user-management-pagination" style="display: flex;">
            <ul class="paging">
                <li th:class="${pageInfo.currentPage == 1} ? 'disabled' : ''">
                    <a th:if="${pageInfo.currentPage > 1}"
                       th:href="@{/AdminController/audit(currentPage=${pageInfo.currentPage - 1}, pageSize=${pageInfo.pageSize},keyword=${keyword})}">
                        <i class="iconfont icon-xiangzuo-1"></i>
                    </a>
                    <!-- 当前页码为 1 时，不显示链接 -->
                    <span th:if="${pageInfo.currentPage == 1}" class="disabled">
                    <i class="iconfont icon-xiangzuo-1"></i>
                </span>
                </li>
                <!-- 动态页码生成 -->
                <li th:each="i : ${#numbers.sequence((pageInfo.currentPage - 2 > 1)? pageInfo.currentPage - 2 : 1, (pageInfo.currentPage + 2 < totalPages)? pageInfo.currentPage + 2 : totalPages)}"
                    th:class="${i == pageInfo.currentPage} ? 'active' : ''">
                    <a th:href="@{/AdminController/audit(currentPage=${i}, pageSize=${pageInfo.pageSize},keyword=${keyword})}"
                       th:text="${i}"></a>
                </li>
                <!-- 下一页按钮 -->
                <li th:class="${pageInfo.currentPage == 1} ? 'disabled move_jiantou' : 'move_jiantou'"
                    style="width: 40px; height: 40px;">
                    <a th:if="${pageInfo.currentPage < totalPages}"
                       th:href="@{/AdminController/audit(currentPage=${pageInfo.currentPage + 1}, pageSize=${pageInfo.pageSize},keyword=${keyword})}">
                        <i class="iconfont icon-xiangyou-1"></i>
                    </a>
                    <!-- 当前页码为 最后 时，不显示链接 -->
                    <span th:if="${pageInfo.currentPage == totalPages}" class="disabled">
                    <i class="iconfont icon-xiangyou-1"></i>
                </span>
                </li>
            </ul>
            <p class="page-number">
                当前为第<span th:text="${pageInfo.currentPage}"></span>页，
                共<span th:text="${totalPages}"></span>页
            </p>
            <div class="jump-component">
                <input type="text" class="jump-input" id="jumpPage-auditPost" autocomplete="new-password" readonly onfocus="this.removeAttribute('readonly')">
                <button class="jump-btn" onclick="jumpToPage('jumpPage-auditPost','audit')" id="auditPost-jumpbtn">跳转</button>
            </div>
        </div>
    </div>
    <div th:if="${activeModule!='article_review'}" class="Loading">加载中...<i class="iconfont icon-jiazaizhong"></i> </div>
</main>

<main id="hot_search" style="display: none;" >
    <div class="main2" th:if="${activeModule=='hot_search'}">
        <h2>热搜管理</h2>
        <form th:action="@{/AdminController/hotSearch}" method="get">
            <input type="text" placeholder="搜索热搜" th:value="${keyword}" name="keyword" id="search-hotSearch">
            <button id="hot-search-btn" type="submit">搜索</button>
        </form>
<!--        <button id="add-search-btn"><i class="iconfont icon-jiahao"></i>添加热搜词</button><br>-->
        <button id="batch-delete-hots"><i class="iconfont icon-shanchu"></i>批量删除</button>
        <table>
            <thead>
            <tr>
                <th><input type="checkbox" id="selectAllTrending"></th>
                <th>热搜ID</th>
                <th>热搜标题</th>
                <th>作者名</th>
                <th>封面</th>
                <th>热度值</th>
                <th>更新时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="hsDTO:${hotSearches}">
                <td><input type="checkbox" class="trendingCheckbox"></td>
                <td th:text="${hsDTO.hotSearchId}"></td>
                <td style="max-width:270px;overflow: hidden;max-height: 60px; white-space: nowrap;" class="hotsearch-td"><a th:text="${hsDTO.title}" th:href="@{'/AdminController/hotSearch/showInfo/'+${hsDTO.hotSearchId}}"></a></td>
                <td th:text="${hsDTO.authorName}"></td>
                <td><img alt="封面" class="news-cover" th:src="${hsDTO.postCover}"></td>
                <td th:text="${hsDTO.heat}"></td>
                <td th:text="${hsDTO.createTime}" style="max-width: 180px"></td>
                <td>
                    <button type="button" class="hot-search-edit" th:attr="onclick='window.location.href=\'' + @{/AdminController/hotSearch/showInfo/{hotSearchId}(hotSearchId=${hsDTO.hotSearchId})} + '\''"><i class="iconfont icon-bianji"></i>编辑</button>
                    <button type="button" class="hot-search-delete"><i class="iconfont icon-shanchu"></i>删除</button>
                </td>
            </tr>
            <tr th:if="${#lists.isEmpty(hotSearches)}">
                <td colspan="10" style="text-align:center;color:red;">没有查询到热搜数据</td>
            </tr>
            </tbody>
        </table>
        <div class="page-component user-management-pagination" style="display: flex;">
            <ul class="paging">
                <li th:class="${pageInfo.currentPage == 1} ? 'disabled' : ''">
                    <a th:if="${pageInfo.currentPage > 1}"
                       th:href="@{/AdminController/users(currentPage=${pageInfo.currentPage - 1}, pageSize=${pageInfo.pageSize},keyword=${keyword})}">
                        <i class="iconfont icon-xiangzuo-1"></i>
                    </a>
                    <!-- 当前页码为 1 时，不显示链接 -->
                    <span th:if="${pageInfo.currentPage == 1}" class="disabled">
                    <i class="iconfont icon-xiangzuo-1"></i>
                </span>
                </li>
                <!-- 动态页码生成 -->
                <li th:each="i : ${#numbers.sequence((pageInfo.currentPage - 2 > 1)? pageInfo.currentPage - 2 : 1, (pageInfo.currentPage + 2 < totalPages)? pageInfo.currentPage + 2 : totalPages)}"
                    th:class="${i == pageInfo.currentPage} ? 'active' : ''">
                    <a th:href="@{/AdminController/hotSearch(currentPage=${i}, pageSize=${pageInfo.pageSize},keyword=${keyword})}"
                       th:text="${i}"></a>
                </li>
                <!-- 下一页按钮 -->
                <li th:class="${pageInfo.currentPage == 1} ? 'disabled move_jiantou' : 'move_jiantou'"
                    style="width: 40px; height: 40px;">
                    <a th:if="${pageInfo.currentPage < totalPages}"
                       th:href="@{/AdminController/hotSearch(currentPage=${pageInfo.currentPage + 1}, pageSize=${pageInfo.pageSize},keyword=${keyword})}">
                        <i class="iconfont icon-xiangyou-1"></i>
                    </a>
                    <!-- 当前页码为 最后 时，不显示链接 -->
                    <span th:if="${pageInfo.currentPage == totalPages}" class="disabled">
                    <i class="iconfont icon-xiangyou-1"></i>
                </span>
                </li>
            </ul>
            <p class="page-number">
                当前为第<span th:text="${pageInfo.currentPage}"></span>页，
                共<span th:text="${totalPages}"></span>页
            </p>
            <div class="jump-component">
                <input type="text" class="jump-input" id="jumpPage-hotSearch" autocomplete="new-password" readonly onfocus="this.removeAttribute('readonly')">
                <button class="jump-btn" onclick="jumpToPage('jumpPage-hotSearch','hotSearch')" id="hotSearch-btn">跳转</button>
            </div>
        </div>
    </div>
    <div th:if="${activeModule!='hot_search'}" class="Loading">加载中...<i class="iconfont icon-jiazaizhong "></i></div>
</main>


<main id="tag_manage" style="display: none;" >
    <div th:if="${activeModule=='tag_manage'}" class="main2">
        <h2>标签管理</h2>
        <form th:action="@{/AdminController/tag}" method="get" style="display: inline-block">
            <input type="text" placeholder="搜索标签" th:value="${keyword}" name="keyword" id="search-tag">
            <button id="category-search-btn" type="submit">搜索</button>
        </form>
        <button id="add-category-btn"><i class="iconfont icon-jiahao"></i>添加标签</button><br>
        <button id="batch-delete-category"><i class="iconfont icon-shanchu"></i>批量删除</button>
        <table>
            <thead>
            <tr>
                <th><input type="checkbox" id="selectAllCategory"></th>
                <th>ID</th>
                <th>标签名称</th>
                <th>标签简介</th>
                <th>文章数量</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
                <tr th:each="tag:${tagList}">
                    <td><input type="checkbox" class="categoryCheckbox"></td>
                    <td th:text="${tag.tagId}" style="max-width: 20px"></td>
                    <td th:text="${tag.tagName}"></td>
                    <td th:text="${tag.tagDescription}" style="max-width: 400px"></td>
                    <td th:text="${tag.postNumber}"></td>
                    <td th:text="${tag.tagStatus==1? '正常' : '隐藏'}"></td>
                    <td>
                        <button class="category-edit"><i class="iconfont icon-bianji"></i>编辑</button>
                        <button class="category-delete"><i class="iconfont icon-shanchu"></i>删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div th:if="${activeModule!='tag_manage'}" class="Loading">加载中...<i class="iconfont icon-jiazaizhong "></i></div>
</main>

<main id="review_form" style="display: block;">
    <div class="main2" th:if="${activeModule=='review_form'}">
        <h2>审核记录表</h2>
        <div class="search-container">
            <!--<input type="text" placeholder="用户昵称" id="search-user-input">
            <button id="search-user">搜索</button>
            <select>
                <option value="all">全部用户</option>
                <option value="verified">管理员</option>
            </select>-->
            <form  method="get">
                <input type="text" name="keyword"  placeholder="用户关键字查询" id="review-form-search">
                <button type="submit" id="review-form-search-btn">搜索</button>
            </form>
        </div>
        <button id="review-form-batch-delete" class="batch-operate">批量删除</button>
        <table>
            <thead>
            <tr>
                <th><input type="checkbox" id="selectAllReview"></th>
                <th>审核记录Id</th>
                <th>新闻Id</th>
                <th>管理员Id</th>
                <th>管理员昵称</th>
                <th>标签</th>
                <th>审核时间</th>
                <th>驳回原因</th>
                <th>审核状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="auditPost : ${auditPost}">
                <td><input type="checkbox" class="reviewCheckbox"></td>
                <td th:text="${auditPost.auditId}"></td>
                <td th:text="${auditPost.postId}"></td>
                <td th:text="${auditPost.adminId}"></td>
                <td th:text="${auditPost.adminName}"></td>
                <td th:text="${auditPost.tagName}"></td>
                <td th:text="${auditPost.auditTime}"></td>
                <td th:text="${auditPost.auditReason}"></td>
                <td th:text="${auditPost.auditResult}"></td>
                <td>
                    <button class="delete-news"><i class="iconfont icon-shanchu"></i>删除</button>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="page-component user-management-pagination" style="display: flex;">
            <ul class="paging">
                <li th:class="${pageInfo.currentPage == 1} ? 'disabled' : ''">
                    <a th:if="${pageInfo.currentPage > 1}"
                       th:href="@{/AdminController/auditLog(currentPage=${pageInfo.currentPage - 1}, pageSize=${pageInfo.pageSize},keyword=${keyword})}">
                        <i class="iconfont icon-xiangzuo-1"></i>
                    </a>
                    <!-- 当前页码为 1 时，不显示链接 -->
                    <span th:if="${pageInfo.currentPage == 1}" class="disabled">
                    <i class="iconfont icon-xiangzuo-1"></i>
                </span>
                </li>
                <!-- 动态页码生成 -->
                <li th:each="i : ${#numbers.sequence((pageInfo.currentPage - 2 > 1)? pageInfo.currentPage - 2 : 1, (pageInfo.currentPage + 2 < totalPages)? pageInfo.currentPage + 2 : totalPages)}"
                    th:class="${i == pageInfo.currentPage} ? 'active' : ''">
                    <a th:href="@{/AdminController/auditLog(currentPage=${i}, pageSize=${pageInfo.pageSize},keyword=${keyword})}"
                       th:text="${i}"></a>
                </li>
                <!-- 下一页按钮 -->
                <li th:class="${pageInfo.currentPage == 1} ? 'disabled move_jiantou' : 'move_jiantou'"
                    style="width: 40px; height: 40px;">
                    <a th:if="${pageInfo.currentPage < totalPages}"
                       th:href="@{/AdminController/auditLog(currentPage=${pageInfo.currentPage + 1}, pageSize=${pageInfo.pageSize},keyword=${keyword})}">
                        <i class="iconfont icon-xiangyou-1"></i>
                    </a>
                    <!-- 当前页码为 最后 时，不显示链接 -->
                    <span th:if="${pageInfo.currentPage == totalPages}" class="disabled">
                    <i class="iconfont icon-xiangyou-1"></i>
                </span>
                </li>
            </ul>
            <p class="page-number">
                当前为第<span th:text="${pageInfo.currentPage}"></span>页，
                共<span th:text="${totalPages}"></span>页
            </p>
            <div class="jump-component">
                <input type="text" class="jump-input" id="jumpPage-review" readonly onfocus="this.removeAttribute('readonly')" autocomplete="new-password">
                <button class="jump-btn" onclick="jumpToPage('jumpPage-review','auditLog')" id="review-jumpbtn">跳转</button>
            </div>
        </div>
    </div>
    <div th:if="${activeModule!='review_form'}" class="Loading">加载中...<i class="iconfont icon-jiazaizhong "></i></div>
</main>

<!--管理员设置弹窗-->
<div id="admin-setting-tc">
    <div id="admin-profile-d">
        <div id="admin-profile" style="background-image: url(../static/img/default_avatar/image.png);">
            <input type="file" style="display: none;" id="admin-profile-file">
            <div id="admin-profile-shade"><br><i class="iconfont icon-tupian"></i><br>
                修改我的头像
            </div>
        </div>
    </div>
    <div id="admin-set-d">
        <div id="admin-dataOrprivacy">
            <div class="admin-set-title">
                <div id="to-set-data" class="to-setdp active-sdp" data-target="admin-data-set">个人资料</div>
            </div>
            <div class="admin-set-title">
                <div id="to-set-privacy" class="to-setdp" data-target="admin-privacy-set">账号安全</div>
            </div>
        </div>
        <div id="admin-data-set" class="admin-set-op">
            <div id="admin-name-d">
                <span id="admin-name">
                    用户8451515
                </span>
                <div id="admin-set-name">
                    <i class="iconfont icon-bianji"></i>
                    修改
                </div>
            </div>
            <div id="admin-name-d2">
                <span class="admin-set-class" style="font-size: 30px;font-weight: 500;">昵称</span>
                <input type="text" name="admin-name-s" id="admin-name-s" value="用户8451515" class="admin-set-inp">
                <i class="iconfont icon-queren" id="confirm-amdin-name"></i>
            </div>
            <div id="admin-set-gender">
                <span class="admin-set-class">性别</span>
                <label for="admin-sex">男</label>
                <input type="radio" id="admin-sex" name="admin-sex" checked>
                <label for="admin-sex">女</label>
                <input type="radio" id="admin-sex" name="admin-sex">
            </div>
            <div id="admin-set-introduce">
                <span class="admin-set-class">简介</span>
                <input type="text" name="admin-introduce" id="admin-introduce" value="教堂的乌鸦" class="admin-set-inp">
            </div>
            <div id="admin-set-address">
                <span class="admin-set-class">地址</span>
                <input type="text" name="admin-address" id="admin-address" value="河南" class="admin-set-inp">
            </div>
        </div>
        <div id="admin-privacy-set" class="admin-set-op">
            <div id="admin-email-d" class="apst">
                <span class="admin-set-class">邮箱</span>
                <p id="admin-email" style="display: inline-block;">2450431277@qq.com</p>
            </div>
            <div id="admin-password-d1" class="apst">
                <span class="admin-set-class">密码</span>
                <p id="admin-email" style="display: inline-block;">············</p>
                <i class="iconfont icon-shezhi" id="change-password">更改</i>
            </div>
            <div id="admin-password-d2" style="display: none;">
                <div id="admin-password-inp1" class="apst">
                    <span class="admin-set-class">新密码</span>
                    <input type="password" name="admin-newpassword" id="admin-newpassword" class="admin-set-inp admin-set-password" placeholder="请输入密码"><i class="iconfont icon-bukejian admin-password-eyes" id="new-password-eye1"></i><br>
                </div>
                <div id="admin-password-inp2" class="apst">
                    <span class="admin-set-class">确认密码</span>
                    <input type="password" name="admin-newpasswordT" id="admin-newpasswordT" class="admin-set-inp admin-set-password" placeholder="请再次输入密码"><i class="iconfont icon-bukejian admin-password-eyes" id="new-password-eye2"></i>
                </div>
                <div class="apst">
                    <span class="admin-set-class">验证码</span>
                    <input type="text" name="admin-code" id="admin-code" class="admin-set-inp" placeholder="请输入验证码" style="width: 200px;">
                    <button id="send-code" type="button">获取验证码</button>
                </div>
                <button id="confirm-change-password" title="确认修改">确认修改</button>
            </div>
        </div>
        <div id="admin-set-btn">
            <button type="button" id="confirm-admin-set">确定</button>
            <button type="button" id="cancel-admin-set">取消</button>
        </div>
    </div>
</div>
<!--添加用户（可以添加管理员）-->
<div id="userFormModal" class="modal-container">
    <h3 id="formTitle" class="modal-title">添加新用户</h3>
    <!-- 头像区域 -->
    <div id="avatarSection" class="avatar-section">
        <div id="avatarContainer" class="avatar-container">
            <div id="avatarPreview" class="avatar-preview" th:style="'background-image: url(@{/img/default_avatar/image.png});'">
                <label for="avatarInput" id="avatarUploadBtn" class="avatar-upload-btn">
                    <i class="fa fa-camera"></i>
                    <input type="file" id="avatarInput" accept="image/*" style="display: none;" onchange="previewAvatar(this)">
                </label>
            </div>
        </div>
        <div id="avatarError" class="error-message">
            请上传用户头像
        </div>
    </div>
    <form id="userForm">
        <!-- 用户昵称 -->
        <div class="form-row">
            <div id="nicknameError" class="error-message">
                请输入用户昵称
            </div>
            <label class="form-label">昵称：</label>
            <div class="form-input-wrapper">
                <input type="text" id="nickname" placeholder="请输入用户昵称" class="form-input" oninput="validateField(this, 'nicknameError')">
                <i class="fa fa-user-o form-icon"></i>
            </div>
        </div>
        <!-- 性别 -->
        <div class="form-row">
            <label class="form-label">性别：</label>
            <div class="form-input-wrapper">
                <div class="flex gap-6">
                    <label class="flex items-center cursor-pointer">
                        <input type="radio" name="gender" value="male" id="genderMale" checked>
                        <span class="ml-2">男</span>
                    </label>
                    <label class="flex items-center cursor-pointer">
                        <input type="radio" name="gender" value="female" id="genderFemale">
                        <span class="ml-2">女</span>
                    </label>
                </div>
            </div>
        </div>
        <!-- 地址 -->
        <div class="form-row">
            <div id="addressError" class="error-message">
                请输入地址
            </div>
            <label class="form-label">地址：</label>
            <div class="form-input-wrapper">
                <input type="text" id="address" placeholder="请输入地址" class="form-input" oninput="validateField(this, 'addressError')">
                <i class="fa fa-map-marker form-icon"></i>
            </div>
        </div>
        <!-- 邮箱 -->
        <div class="form-row">
            <div id="emailError" class="error-message">
                请输入有效的邮箱地址
            </div>
            <label class="form-label">邮箱：</label>
            <div class="form-input-wrapper">
                <input type="text" id="email" placeholder="请输入邮箱地址" class="form-input" oninput="validateEmail(this)" autocomplete="off">
                <i class="fa fa-envelope-o form-icon"></i>
            </div>
        </div>
        <!-- 密码 -->
        <div class="form-row" style="display: none">
            <div id="passwordError" class="error-message">
                密码需6-64位，包含大小写字母、数字和特殊符号
            </div>
            <label class="form-label">密码：</label>
            <div class="form-input-wrapper">
                <input type="password" id="password" placeholder="请输入密码" class="form-input" oninput="validatePassword(this)" autocomplete="off">
                <i class="fa fa-lock form-icon"></i>
            </div>
        </div>
        <!-- 简介 -->
        <div class="form-row">
            <label class="form-label">简介：</label>
            <div class="form-input-wrapper">
                <textarea id="bio" placeholder="请输入用户简介（最多200字）" rows="3" class="form-input resize-none" ></textarea>
            </div>
        </div>
        <!-- 是否为管理员 -->
        <div class="form-row">
            <label class="form-label"></label>
            <div class="form-input-wrapper">
                <label class="flex items-center cursor-pointer">
                    <input type="checkbox" id="isAdmin">
                    <span class="ml-2">设为管理员</span>
                </label>
            </div>
        </div>
        <!-- 是否认证 -->
        <div class="form-row">
            <div class="flex items-center mb-2" style="display: inline-block;">
                <input type="checkbox" id="isCertified" onchange="toggleCertificationInput(this)">
                <span class="ml-2 text-gray-700">认证用户</span>
            </div>
            <div id="certificationContent" class="certification-content">
                <div id="certificationError" class="error-message">
                    请输入认证内容
                </div>
                <div class="form-input-wrapper" style="width: 380px;">
                    <input type="text" id="certificationInput" placeholder="请输入认证内容" class="form-input" oninput="validateField(this, 'certificationError')">
                    <i class="fa fa-certificate form-icon"></i>
                </div>
            </div>
        </div>
        <!-- 操作按钮 -->
        <div class="flex justify-center gap-4 mt-8">
            <button type="button" id="saveBtn" class="btn btn-primary">
                <i class="fa fa-save mr-2"></i>确定
            </button>
            <button type="button" id="cancelBtn" class="btn btn-secondary">
                <i class="fa fa-times mr-2"></i>取消
            </button>
        </div>
    </form>
</div>
<!--批量删除-用户-->
<div id="batch-delete-user-d">
    <p id="bdu-title">批量删除用户<i class="iconfont icon-quxiao" id="bdu-close"></i></p>
    <div id="bdu-prompt">是否删除选中的用户？</div>
    <div id="bdu-btn">
        <button type="button" id="bdu-confirm">确定</button>
        <button type="button" id="bdu-cancel">取消</button>
    </div>
</div>
<!--弹窗***用户编辑-->
<div id="edit-user-d">
    <p id="user-data-edit-title">用户编辑</p>
    <div id="user-avatar-edit-d">
        <div id="user-avatar-edit-d2">
            <input type="file" id="user-avatar-edit-file">
            <div id="user-avatar-edit-select">+选择头像</div>
        </div>
        <button id="default-avatar" title="设置为默认头像">默认头像</button>
    </div>
    <div id="user-data-edit-d">
        <div id="user-name-edit" class="user-data-edit">
            <label for="user-name-edit-input" class="user-data-label">昵称:</label>
            <input type="text" id="user-name-edit-input" class="user-data-input">
            <i class="iconfont icon-hongsegantanhao alert-adit" id="alert-edit-name" title="用户昵称不能为空" style="position: relative;left:180px"></i>
        </div>
        <div id="user-address-edit" class="user-data-edit">
            <label for="user-address-edit-input" class="user-data-label">地址:</label>
            <input type="text" id="user-address-edit-input" class="user-data-input">
        </div>
        <div id="user-gender-edit" class="user-data-edit">
            男<input type="radio" name="gender" value="0" id="user-gender-male" class="user-gender-edit">
            女<input type="radio" name="gender" value="1" id="user-gender-female" class="user-gender-edit">
        </div>
        <div id="user-introduction-edit" class="user-data-edit">
            <label for="user-introduction-edit-input" class="user-data-label">简介:</label>
            <textarea type="text" id="user-introduction-edit-input" class="user-data-input long-input" ></textarea>
        </div>
        <div id="user-email-edit" class="user-data-edit">
            <label for="user-email-edit-input" class="user-data-label">邮箱:</label>
            <input type="text" id="user-email-edit-input" class="user-data-input long-input">
            <i class="iconfont icon-hongsegantanhao alert-adit" id="alert-edit-email" title="用户邮箱不能为空，且格式要正确" style="position: relative;left:380px"></i>
        </div>
        <div id="user-memberOrAdmin-edit" class="user-data-edit">
            <div id="user-member-set-d">
                <span class="set-title">会员设置：</span>
                <label for="user-member-set-0">非会员</label>
                <input type="radio" name="member-set" value="0" id="user-member-set-0" class="user-member-set-input set-MA-input">
                <label for="user-member-set-1">会员</label>
                <input type="radio" name="member-set" value="1" id="user-member-set-1" class="user-member-set-input set-MA-input">
                <label for="user-member-set-2">超级会员</label>
                <input type="radio" name="member-set" value="2" id="user-member-set-2" class="user-member-set-input set-MA-input">
            </div>
            <div id="user-admin-set-d">
                <span class="set-title">管理员设置：</span>
                <label for="user-admin-set-0">普通用户</label>
                <input type="radio" name="admin-set" value="0" id="user-admin-set-0" class="user-admin-set-input set-MA-input">
                <label for="user-admin-set-1">管理员</label>
                <input type="radio" name="admin-set" value="1" id="user-admin-set-1" class="user-admin-set-input set-MA-input">
            </div>
        </div>
        <div id="user-verifiedStatus-edit" class="user-data-edit">
            <label for="user-verified-set">认证：</label>
            <input type="text" id="user-verified-set-input">
            <i class="iconfont icon-hongsegantanhao alert-adit" id="alert-edit-verified" title="用户认证不能为空"></i>
            <input type="checkbox" id="user-verified-set">
        </div>
    </div>
    <div id="user-edit-btn">
        <button id="confirm-edit">修改</button>
        <button id="cancel-edit">取消</button>
    </div>
</div>
<!--权限弹窗-->
<div id="ban-post-tc">
    <div id="ban-user-data">
        <img src="../static/img/default_avatar/image.png" alt="用户头像" class="bpud" th:src="@{/img/default_avatar/image.png}"/>
        <p class="bpud">昵称：用户8446546</p>      <!--ban post user data-->
        <p class="bpud">Id：56546846</p>
    </div>
    <div id="ban-post-setting" class="main-permission-set">
        <h3>权限设置<i class="iconfont icon-quxiao" id="close-ban-post"></i></h3>
        <div class="ban-form-container">
            <div class="ban-form-div">
                <label for="ban-to-post-input" class="ban-label">禁言：</label>
                <input type="checkbox" name="ban-to-post" id="ban-to-post-input" class="ban-input">
            </div>
            <div class="ban-form-div">
                <label for="banned-input" class="ban-label">封禁：</label>
                <input type="checkbox" name="ban-to-post" id="banned-input" class="ban-input">
            </div>
<!--            <div class="ban-form-div" style="margin-bottom: 50px">-->
<!--                <label for="ban-privacy-input" class="ban-label">禁用私信：</label>-->
<!--                <input type="checkbox" name="ban-to-post" id="ban-privacy-input" class="ban-input">-->
<!--            </div>-->
        </div>
        <div id="ban-post-btn">
            <button id="confirm-ban-post" type="button">确定</button>
            <button id="cancel-ban-post" type="button">取消</button>
        </div>
    </div>
</div>
<!--批量设置权限-->
<div id="user-battch-operata">
    <p id="battch-set-operate">为选中的用户批量设置权限</p>
    <div id="battch-user-data">
        <div class="ban-form-div">
            <label for="ban-to-post-input" class="ban-label">禁言：</label>
            <input type="checkbox" name="ban-to-post" id="ban-to-post-input-b" class="ban-input">
        </div>
        <div class="ban-form-div">
            <label for="banned-input" class="ban-label">封禁：</label>
            <input type="checkbox" name="ban-to-post" id="banned-input-b" class="ban-input">
        </div>
<!--        <div class="ban-form-div" >-->
<!--            <label for="ban-privacy-input" class="ban-label">禁用私信：</label>-->
<!--            <input type="checkbox" name="ban-to-post" id="ban-privacy-input-b" class="ban-input">-->
<!--        </div>-->
    </div>
    <div id="battch-set-btns">
        <button id="confirm-battch-operate" type="button">确定</button>
        <button id="cancel-battch-operate" type="button">取消</button>
    </div>
</div>
<!--删除用户-->
<div id="delete-user-tc">
    <h3>是否删除该用户吗？<i class="iconfont icon-quxiao" id="close-delete-user"></i></h3>
    <img src="../static/img/default_avatar/image.png" alt="用户头像" class="delete-user-data">
    <p class="delete-user-data">昵称：羽</p>
    <div id="auth-div">
        <input type="checkbox" id="auth" name="auth">
        <label for="auth" style="font-size: 14px;color:rgba(0,0,0,0.2);cursor: pointer;">我以确认要删除该用户</label>
    </div>
    <span id="default_user-span">请先确认后再删除用户</span>
    <div id="delete-user-btns">
        <button id="confirm-delete">确定</button>
        <button id="cancel-delete">取消</button>
    </div>
</div>
<!--删除热搜-->
<div id="delete-hotsearch-tc">
    <h3>删除热搜<i class="iconfont icon-quxiao" id="close-delete-hotsearch" style="cursor:pointer;"></i></h3>
    <p style="position: absolute;left: 50px">确定要删除该热搜吗？</p>
    <span id="hotsearch-span">请先确认后再删除用户</span>
    <div id="hotsearch-user-btns">
        <button id="confirm-delete-hotsearch">确定</button>
        <button id="cancel-delete-hotsearch">取消</button>
    </div>
</div>
<!--删除封装-->
<div id="delete-one">
    <h3><span id="delete-one-title">删除</span><i class="iconfont icon-quxiao" id="close-delete-one" style="cursor:pointer;"></i></h3>
    <p style="position: absolute;left: 50px" id="delete-one-prompt">确定要删吗？</p>
    <div id="oneDelete-btns">
        <button id="confirm-delete-one">确定</button>
        <button id="cancel-delete-one">取消</button>
    </div>
</div>
<!--添加标签-->
<div id="add-tag-tc">
    <div id="add-tag-title">
        <p class="add-tag-titleText">添加标签</p>
        <button id="add-tag-close" style="background-color: transparent"><i class="iconfont icon-quxiao"></i></button>
    </div>
    <div id="add-tag-main">
        <div class="add-tag-name add-tag-content">
            <div for="tag-name" class="add-tag-label">标签名称<span id="tag-name-warn">*</span></div>
            <input type="text" id="tag-name" class="add-tag-input" placeholder="请输入标签名称">
        </div>
        <div class="add-tag-instrotiction add-tag-content">
            <div for="tag-instrotiction" class="add-tag-label">标签描述</div>
            <textarea type="text" id="tag-instrotiction" class="add-tag-input" placeholder="请输入标签描述"></textarea>
        </div>
        <div class="add-tag-ishidden add-tag-content">
            <label for="tag-ishidden">是否可见</label>
            <input type="checkbox" id="tag-ishidden" style="margin-left: 20px" checked>
        </div>
    </div>
    <div id="add-tag-btns">
        <div id="add-tag-btns2">
            <button id="add-tag-confirm">确认</button>
            <button id="add-tag-cancel">取消</button>
        </div>
    </div>
</div>
<!--confirm-->
<div id="confirm-container">
    <div id="confirm-title-container" class="confirm-title">
        <p id="confirm-title-container2"><i class="iconfont icon-xiaowenhao" id="wenhao"></i><span id="confirm-title">标题</span></p>
    </div>
    <div id="confirm-content-container" class="confirm-content">
        <p id="confirm-content-container2"><span id="article-content-span">内容</span></p>
    </div>
    <div id="confirm-button-container" class="confirm-button">
        <button id="confirm-button" class="confirm-btn">确定</button>
        <button id="cancel-button" class="confirm-btn">取消</button>
    </div>
</div>
<div id="showModal" class="showModal"></div>            <!--弹窗遮罩-->
<div id="showModal_ban"></div>
<div id="showModal_delete" class="showModal"></div>
<div id="showModal-admin-set" class="showModal"></div>
<div id="showModal-batch" class="showModal"></div>
<div id="showModal-addUser" class="showModal"></div>
<div id="battch-operate-user-showmodel"></div>
<div id="showModal-delete-hot" class="showModal"></div>
<div id="delete-one-showmodal" class="showModal"></div>
<div id="add-tag-showModal" class="showModal"></div>
<div id="confirmShowmodal" class="showModal"></div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- 修改3：添加模块激活脚本 每次加载页面时确定激活状态的模块-->
<script th:inline="javascript">
    // 在页面加载时激活对应模块
    document.addEventListener('DOMContentLoaded', function() {
        const activeModule = [[${activeModule}]];
        if(activeModule) {
            // 隐藏所有main块
            document.querySelectorAll('main').forEach(main => {
                main.style.display = 'none';
            });
            // 显示目标模块
            const targetMain = document.getElementById(activeModule);
            if(targetMain) {
                targetMain.style.display = 'block';
            }
            // 更新导航栏状态
            document.querySelectorAll('.left_bar_ul li').forEach(li => {
                li.classList.remove('active');
                if(li.dataset.target === activeModule) {
                    li.classList.add('active');
                }
            });
        }
    });
</script>

<script th:inline="javascript">
    window.currentPage = /*[[${pageInfo.currentPage}]]*/1;
    function jumpToPage(input_obj,targetUrl) {
        const inputValue = document.getElementById(input_obj).value;
        const page = parseInt(inputValue);
        if (isNaN(page)) {
            //alert("请输入有效的数字页码");
            return;
        }
        const pageSize = /*[[${pageInfo.pageSize}]]*/7;
        const totalCount = /*[[${pageInfo.totalCount}]]*/0;
        let keyword=/*[[${keyword}]]*/"";
        keyword=(keyword==="")?"":keyword;
        window.keyWord = keyword;
        if (totalCount === 0) {
            // alert("没有可用数据");
            return;
        }
        const totalPages = Math.ceil(totalCount / pageSize);
        if(page < 1 || page > totalPages) {
            //alert("页码需在 1-" + totalPages + " 之间");
            return;
        }
        // 添加完整参数
        window.location.href = `/AdminController/${targetUrl}?currentPage=${page}&pageSize=${pageSize}&keyword=${keyword===null?"":keyword}`;
    }
</script>
<script src="../static/js/admin.js" th:src="@{/js/admin.js}"></script>
<script th:src="@{/js/hotSearchAdmin.js}" src="../static/js/hotSearchAdmin.js"></script>
</body>
</html>